ComponentOne ASP.NET Web Forms Edition
Candlestick Chart Types / Creating a Candlestick Chart
In This Topic
Creating a Candlestick Chart
In This Topic

There are two ways to create a Candlestick chart: at design time or in Source View. This topic assumes that you have added the appropriate references and a C1CandlestickChart control to your new application. The "Candlestick" type chart is the default chart type.

 

At Design Time

  1. Select the C1CandlestickChart control to open the control's Properties window.
  2. Locate the Type property in the Appearance properties.
  3. Check the type to make sure "Candlestick" is selected. This is the default chart type, so it should be selected automatically.  
  4. Add SeriesList data as in Step 2 of the Quick Start. For a Candlestick chart, you need High, Low, Open, Close and X values.
  5. Customize your chart using the ChartStyle options.
  6. Run your application.

In Source View

The following markup can be used to create and customize a Candlestick chart in Source View. Note that the color and width of the chart elements has been set:

Markup
Copy Code 
 <cc1:C1CandlestickChart ID="C1CandlestickChart1" runat="server" Type="Candlestick">
     <CandlestickChartSeriesStyles>
         <cc1:CandlestickChartStyle>
             <HighLow Fill-Color="#ff9900" Width="2"></HighLow>
             <FallingClose Fill-Color="#ff0000" Width="6"></FallingClose>
             <RaisingClose Fill-Color="#ff9900" Width="6"></RaisingClose>
         </cc1CandlestickChartStyle>
     </CandlestickChartSeriesStyles>    
     <SeriesList>
         <cc1:CandlestickChartSeries LegendEntry="True" Label="Values">
             <Data>
                 <High DoubleValues="10, 12, 11, 14, 16, 20, 18, 17" />
                 <Low DoubleValues="7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10" />
                 <Open DoubleValues="8,8.6,11,6.2,13.8,15,14,12"></Open>
                 <Close DoubleValues="8.6,11,6.2,13.8,15,14,12,10"></Close>
                 <X>
                     <Values>
                         <cc1:ChartXData DateTimeValue="2014-03-07" />
                         <cc1:ChartXData DateTimeValue="2014-03-08" />
                         <cc1:ChartXData DateTimeValue="2014-03-09" />
                         <cc1:ChartXData DateTimeValue="2014-03-10" />
                         <cc1:ChartXData DateTimeValue="2014-03-11" />
                         <cc1:ChartXData DateTimeValue="2014-03-12" />
                         <cc1:ChartXData DateTimeValue="2014-03-13" />
                         <cc1:ChartXData DateTimeValue="2014-03-14" />
                     </Values>
                 </X>
             </Data>
         </cc1CandlestickChartSeries>
     </SeriesList>           
 </cc1C1CandlestickChart>
See Also
Design-Time Support